<script setup>
import { onMounted, ref } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import { getBookInformation } from '@/apis/bookInformation';
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
const bookInfo = ref();
const route = useRoute();
const router = useRouter();
const id = ref()
const props = defineProps({
  color:{
    type:String
  }
})
const getBookInfo = async () => {
  console.log(route)
  console.log(route.params.id)
  id.value = route.params.id
  console.log(id.value)
  bookInfo.value = await getBookInformation(route.params.id,proxy)
  console.log(bookInfo.value)
}
onMounted(() => {
  console.log("onMounted is called")
  getBookInfo()
})
</script>
<template>
  <div class="main" v-if="bookInfo!=undefined">
    <div class="img-div">
      <img class="img" :src="bookInfo.cover_url" :alt="bookInfo.name">
    </div>
    <div class="title">
      <p class="bookName">{{ bookInfo.name }}</p>
      <p class="authorName">{{ bookInfo.author.author_name }}</p>
    </div>
    <div class="information">
      <div class="type">
        <p class="type1">{{ bookInfo.tag[0] }}</p>
        <p class="type2">类型</p>
      </div>
      <div class="time">
        <p class="type1">{{ bookInfo.time_published }}</p>
        <p class="type2">首发时间</p>
      </div>
      <div class="word">
        <p class="type1">{{ bookInfo.word_count }}</p>
        <p class="type2">字数</p>
      </div>
    </div>

    <div>
      <p class="lay">版本所有*侵权必究</p>
    </div>
  </div>
</template>

<style scoped>
.main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: v-bind(color);
  margin: 10px;
}

.title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.img {
  width: 200px;
  height: 300px;
  margin: 20px;
}

.bookName {
  margin: 10px;
  font-weight: normal;
  font-size: 20px;
  opacity: 0.9;
}

.authorName {
  margin: 0 10px 10px 10px;
  opacity: 0.7;
}

.lay {
  margin: 5px;
  opacity: 0.5;
}

.information {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.type {
  margin: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.time{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 10px 150px;
}
.word{
  margin: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.type1 {
  margin: 3px;
  font-size: 20px;
  font-weight: normal;
}

.type2 {
  margin: 3px;
  opacity: 0.5;
  font-size: 15px;
  font-weight: lighter;
}
</style>